<template>
    <el-container class="home">
      <!-- 头部 -->
      <el-header>
        <div class="left">
          <img @click="goHmoe" src="../assets/heima.png">
          <span>后台管理系统</span>
        </div>
        <el-button class="loginout" @click="loginout">退出登录</el-button>
      </el-header>
      <!-- 身体 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="collapseFlag ? '64px' : '200px'">
          <div class="toggleMenu" @click='collapseFlag = !collapseFlag'>
            |||
          </div>
          <el-menu
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                :unique-opened='true'
                :collapse="collapseFlag"
                :collapse-transition="false"
                router
                active-text-color="#409eff">
                <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                  <template slot="title">
                    <i :class="iconsList[item.id]"></i>
                    <span>{{ item.authName }}</span>
                  </template>
                  <!-- <el-menu-item :index="item2.path" v-for="item2 in item.children" :key="item2.id"> -->
                  <el-menu-item :index="'/' + item2.path" v-for="item2 in item.children" :key="item2.id">
                    <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span> {{ item2.authName }} </span>
                    </template>
                  </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <!-- 主体内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '',
      collapseFlag: false,
      menuList: [],
      iconsList: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      }
    }
  },

  created () {
    this.getMenu()
    // console.log(this.$route)
    // console.log(this.$router)
    this.activeIndex = this.$route.path
  },

  methods: {
    loginout () {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
      this.$message.success('退出成功')
    },
    async getMenu () {
      const { data: res } = await this.$axios.get('menus')
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.menuList = res.data
    },
    goHmoe () {
      if (this.$route.path === '/welcome') return
      this.$router.push('/welcome')
      this.$router.go(0)
    }
  }
}
</script>

<style scoped lang='less'>
    .home {
      height: 100%;
    }
    // 头部
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, .8);
      .left {
        display: flex;
        align-items: center;
        img {
          background-color: #fff;
          border-radius: 50%;
          cursor: pointer;
        }
        span {
          padding-left: 15px;
        font-size: 24px;
        color: #fff;
      }
      }
    }
    // 侧边栏
    .el-aside {
      background: rgba(0, 0, 0, .8);
      .toggleMenu{
        height: 40px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        background-color: pink;
        color: #fff;
        letter-spacing: 5px;
        user-select: none;
      }
      .el-menu{
        border-right: none;
        }
      .iconfont {
        margin-right: 8px;
      }
    }
    // 主体内容区域
    .el-main {
      // background: -webkit-linear-gradient(left, #00C9FF, #92FE9D);
      background-color: #f5f5f5;
    }
</style>
